<template>
	<view class="container">
		<!-- 页面标题和仓库基本信息 -->
		<view class="header">
			<view class="header-info">
				<view class="" style="display: flex; align-items: center">
					<view class=""><text class="page-title">仓库管理看板</text></view>
					<view class="" style="margin-left: 20rpx" @click="to_W_mode"><text style="color: blue; font-size: 28rpx">切换横式</text></view>
				</view>

				<view class="warehouse-base-info">
					<view class="info-item">
						<uni-icons type="shop-filled" size="16" color="#165DFF" class="icon-mr"></uni-icons>
						<text>
							仓库编号:
							<text class="info-value">WH-2023-005</text>
						</text>
					</view>
					<view class="info-item">
						<view class="">
							<uni-icons type="location" size="16" color="#165DFF" class="icon-mr"></uni-icons>
							<text>
								仓库名称:
								<text class="info-value">华东区域中心仓库</text>
							</text>
						</view>

						<view class="info_setup" @click="infoSetup"><text>设置</text></view>
					</view>
				</view>
			</view>
			<view class="datetime-card">
				<uni-icons type="calendar" size="20" color="#165DFF" class="icon-mr"></uni-icons>
				<view>
					<text class="current-date">{{ currentDate }}</text>
					<text class="current-time">{{ currentTime }}</text>
				</view>
			</view>
		</view>

		<!-- 仓库概览统计卡片 -->
		<view class="grid grid-4">
			<!-- 仓库总面积 -->
			<view class="stat-card">
				<text class="stat-title">仓库总面积</text>
				<text class="stat-value">8,500 m²</text>
				<view class="stat-trend trend-up">
					<uni-icons type="arrow-up" size="16" color="green"></uni-icons>
					<text>较上月增长 2.4%</text>
				</view>
			</view>

			<!-- 仓库总容积 -->
			<view class="stat-card">
				<text class="stat-title">仓库总容积</text>
				<text class="stat-value">25,600 m³</text>
				<view class="stat-trend trend-up">
					<uni-icons type="arrow-up" size="16" color="green"></uni-icons>
					<text>较上月增长 1.8%</text>
				</view>
			</view>

			<!-- 已用容积 -->
			<view class="stat-card">
				<text class="stat-title">已用容积</text>
				<text class="stat-value">18,200 m³</text>
				<view class="stat-trend trend-up">
					<uni-icons type="arrow-up" size="16" color="green"></uni-icons>
					<text>使用率 71.1%</text>
				</view>
			</view>

			<!-- 员工出勤 -->
			<view class="stat-card">
				<text class="stat-title">员工出勤</text>
				<text class="stat-value">42/45 人</text>
				<view class="stat-trend trend-up">
					<uni-icons type="staff-filled" size="16" color="green"></uni-icons>
					<text>出勤率 93.3%</text>
				</view>
			</view>
		</view>

		<!-- 容积趋势和存储区情况 -->
		<view class="grid grid-3">
			<!-- 7天容积趋势图 -->
			<view class="lg-col-span-2 panel-card">
				<view class="panel-header">
					<text class="panel-title">已用容积7天趋势</text>
					<view class="panel-actions">
						<button class="action-btn active">日</button>
						<button class="action-btn">周</button>
						<button class="action-btn">月</button>
					</view>
				</view>
				<view class="chart-container">
					<canvas id="volumeTrendChart" canvas-id="volumeTrendChart" class="chart"></canvas>
				</view>
			</view>

			<!-- 存储区情况 -->
			<view class="panel-card">
				<text class="panel-title">存储区情况</text>
				<view class="storage-list">
					<!-- 普通存储区 -->
					<view class="storage-item storage-normal">
						<view class="storage-header">
							<text class="storage-name">普通存储区</text>
							<text class="storage-slots">520个库位</text>
						</view>
						<view class="storage-info">
							<view class="info-row">
								<uni-icons type="temp" size="16" color="#FF7D00" class="icon-mr"></uni-icons>
								<text>温度: 23°C</text>
							</view>
							<view class="info-row">
								<uni-icons type="water" size="16" color="#165DFF" class="icon-mr"></uni-icons>
								<text>湿度: 45%</text>
							</view>
							<view class="info-row">
								<uni-icons type="folder-open" size="16" color="#00B42A" class="icon-mr"></uni-icons>
								<text>空载率: 18%</text>
							</view>
							<view class="info-row monitor-btn">
								<text>查看监控</text>
								<uni-icons type="videocam" size="16"></uni-icons>
							</view>
						</view>
					</view>

					<!-- 冷链存储区 -->
					<view class="storage-item storage-cold">
						<view class="storage-header">
							<text class="storage-name">冷链存储区</text>
							<text class="storage-slots">180个库位</text>
						</view>
						<view class="storage-info">
							<view class="info-row">
								<uni-icons type="temp" size="14" color="#165DFF" class="icon-mr"></uni-icons>
								<text>温度: 4°C</text>
							</view>
							<view class="info-row">
								<uni-icons type="water" size="14" color="#165DFF" class="icon-mr"></uni-icons>
								<text>湿度: 60%</text>
							</view>
							<view class="info-row">
								<uni-icons type="folder-open" size="14" color="#00B42A" class="icon-mr"></uni-icons>
								<text>空载率: 25%</text>
							</view>
							<view class="info-row monitor-btn">
								<text>查看监控</text>
								<uni-icons type="video" size="14"></uni-icons>
							</view>
						</view>
					</view>

					<!-- 危险品存储区 -->
					<view class="storage-item storage-danger">
						<view class="storage-header">
							<text class="storage-name">危险品存储区</text>
							<text class="storage-slots">50个库位</text>
						</view>
						<view class="storage-info">
							<view class="info-row">
								<uni-icons type="temp" size="14" color="#FF7D00" class="icon-mr"></uni-icons>
								<text>温度: 21°C</text>
							</view>
							<view class="info-row">
								<uni-icons type="water" size="14" color="#165DFF" class="icon-mr"></uni-icons>
								<text>湿度: 35%</text>
							</view>
							<view class="info-row">
								<uni-icons type="folder-open" size="14" color="#00B42A" class="icon-mr"></uni-icons>
								<text>空载率: 32%</text>
							</view>
							<view class="info-row monitor-btn">
								<text>查看监控</text>
								<uni-icons type="video" size="14"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 入库和出库信息 -->
		<view class="grid grid-2">
			<!-- 入库信息 -->
			<view class="panel-card">
				<text class="panel-title">入库信息</text>

				<!-- 入库统计 -->
				<view class="stat-grid">
					<view class="stat-item">
						<text class="stat-item-title">申请单数</text>
						<text class="stat-item-value">28</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">已验收</text>
						<text class="stat-item-value success">22</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">待审核</text>
						<text class="stat-item-value warning">4</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">已归档</text>
						<text class="stat-item-value primary">20</text>
					</view>
				</view>

				<!-- 入库占比饼图 -->
				<view class="grid grid-2 chart-grid">
					<view class="chart-item">
						<text class="chart-title">入库状态占比</text>
						<canvas id="inboundStatusChart" canvas-id="inboundStatusChart" class="chart"></canvas>
					</view>
					<view class="chart-item">
						<text class="chart-title">入库类别占比</text>
						<canvas id="inboundCategoryChart" canvas-id="inboundCategoryChart" class="chart"></canvas>
					</view>
				</view>

				<!-- 入库差异 -->
				<view class="diff-panel">
					<text class="diff-title">入库差异</text>
					<view class="diff-grid">
						<view class="diff-item">
							<text class="diff-value">3</text>
							<text class="diff-label">差异单数</text>
						</view>
						<view class="diff-item">
							<text class="diff-value">5</text>
							<text class="diff-label">差异SKU</text>
						</view>
						<view class="diff-item">
							<text class="diff-value">10.7%</text>
							<text class="diff-label">差异占比</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 出库信息 -->
			<view class="panel-card">
				<text class="panel-title">出库信息</text>

				<!-- 出库统计 -->
				<view class="stat-grid">
					<view class="stat-item">
						<text class="stat-item-title">出库单数</text>
						<text class="stat-item-value">36</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">已分拣</text>
						<text class="stat-item-value primary">30</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">待审核</text>
						<text class="stat-item-value warning">2</text>
					</view>
					<view class="stat-item">
						<text class="stat-item-title">已出库</text>
						<text class="stat-item-value success">28</text>
					</view>
				</view>

				<!-- 出库占比饼图 -->
				<view class="grid grid-2 chart-grid">
					<view class="chart-item">
						<text class="chart-title">出库状态占比</text>
						<canvas id="outboundStatusChart" canvas-id="outboundStatusChart" class="chart"></canvas>
					</view>
					<view class="chart-item">
						<text class="chart-title">出库类别占比</text>
						<canvas id="outboundCategoryChart" canvas-id="outboundCategoryChart" class="chart"></canvas>
					</view>
				</view>

				<!-- 出库差异 -->
				<view class="diff-panel">
					<text class="diff-title">出库差异</text>
					<view class="diff-grid">
						<view class="diff-item">
							<text class="diff-value">2</text>
							<text class="diff-label">差异单数</text>
						</view>
						<view class="diff-item">
							<text class="diff-value">3</text>
							<text class="diff-label">差异SKU</text>
						</view>
						<view class="diff-item">
							<text class="diff-value">5.6%</text>
							<text class="diff-label">差异占比</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 物流状态表和财务状况 -->
		<view class="grid grid-3">
			<!-- 物流状态表 -->
			<view class="lg-col-span-2 panel-card">
				<text class="panel-title">今日物流状态</text>
				<view class="table-container">
					<table class="logistics-table">
						<thead>
							<tr class="table-header">
								<th>物流类别</th>
								<th>单数</th>
								<th>在途数量</th>
								<th>已完成数</th>
								<th>完成履约占比</th>
							</tr>
						</thead>
						<tbody>
							<tr class="table-row">
								<td>采购入库</td>
								<td>15</td>
								<td>3</td>
								<td>12</td>
								<td>
									<view class="progress-container">
										<view class="progress-bar" style="width: 80%"></view>
										<text class="progress-text">80%</text>
									</view>
								</td>
							</tr>
							<tr class="table-row">
								<td>销售出库</td>
								<td>28</td>
								<td>5</td>
								<td>23</td>
								<td>
									<view class="progress-container">
										<view class="progress-bar" style="width: 82%"></view>
										<text class="progress-text">82%</text>
									</view>
								</td>
							</tr>
							<tr class="table-row">
								<td>调拨入库</td>
								<td>7</td>
								<td>2</td>
								<td>5</td>
								<td>
									<view class="progress-container">
										<view class="progress-bar" style="width: 71%"></view>
										<text class="progress-text">71%</text>
									</view>
								</td>
							</tr>
							<tr class="table-row">
								<td>调拨出库</td>
								<td>4</td>
								<td>1</td>
								<td>3</td>
								<td>
									<view class="progress-container">
										<view class="progress-bar" style="width: 75%"></view>
										<text class="progress-text">75%</text>
									</view>
								</td>
							</tr>
							<tr class="table-row">
								<td>退货入库</td>
								<td>3</td>
								<td>0</td>
								<td>3</td>
								<td>
									<view class="progress-container">
										<view class="progress-bar" style="width: 100%"></view>
										<text class="progress-text">100%</text>
									</view>
								</td>
							</tr>
						</tbody>
					</table>
				</view>
			</view>

			<!-- 仓库财务状况 -->
			<view class="panel-card">
				<text class="panel-title">仓库财务状况</text>
				<view class="finance-list">
					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">仓储容积费用</text>
							<text class="finance-value">¥28,500</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 75%"></view>
						</view>
					</view>

					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">分拣费用</text>
							<text class="finance-value">¥12,300</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 40%"></view>
						</view>
					</view>

					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">拆箱费用</text>
							<text class="finance-value">¥5,800</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 20%"></view>
						</view>
					</view>

					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">包装费用</text>
							<text class="finance-value">¥9,600</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 32%"></view>
						</view>
					</view>

					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">装卸费用</text>
							<text class="finance-value">¥7,200</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 25%"></view>
						</view>
					</view>

					<view class="finance-item">
						<view class="finance-header">
							<text class="finance-name">其它费用</text>
							<text class="finance-value">¥3,400</text>
						</view>
						<view class="finance-progress">
							<view class="progress-fill" style="width: 12%"></view>
						</view>
					</view>

					<view class="finance-total">
						<text class="total-label">今日总计</text>
						<text class="total-value">¥66,800</text>
					</view>
				</view>
			</view>
		</view>
		<view class="popup_view" >
			<uni-popup ref="popup" type="top" :maskClick=true>
				<warehouseInfo :warehouseCode="warehouseCode" @close="close" ></warehouseInfo>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import * as echarts from 'echarts'; // 从node_modules引入
import warehouseInfo from '@/components/warehouseInfo.vue';
import {userMainStore} from'@/store/mainStore.js'
export default {
	components: {
		warehouseInfo
	},
	data() {
		return {
			currentDate: '',
			currentTime: '',
			charts: {}, // 存储图表实例
			warehouseCode: ''
		};
	},

	mounted() {
		this.warehouseCode=userMainStore().getMainObjectId; 
		// 等待DOM完全渲染后初始化图表
		this.$nextTick(() => {
			this.initCharts();
		});
	},

	methods: {
		// 更新日期时间
		updateDateTime() {
			const now = new Date();
			this.currentDate = now.toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				weekday: 'long'
			});
			this.currentTime = now.toLocaleTimeString('zh-CN', {
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			});
		},
		to_W_mode() {
			//uni.$emit('open','displayW')
			uni.navigateTo({
				url: '/pages/whDisplayW/whDisplayW'
			});
		},
		infoSetup() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		// 初始化所有图表
		async initCharts() {
			try {
				// 初始化容积趋势图
				await this.initVolumeTrendChart();
				// 初始化入库相关图表
				await this.initInboundStatusChart();
				await this.initInboundCategoryChart();
				// 初始化出库相关图表
				await this.initOutboundStatusChart();
				await this.initOutboundCategoryChart();
			} catch (error) {
				console.error('图表初始化失败:', error);
			}
		},

		// 获取Canvas元素（兼容H5和小程序）
		async getCanvasElement(canvasId) {
			return new Promise((resolve, reject) => {
				// H5平台：使用document.getElementById
				if (process.env.VUE_APP_PLATFORM === 'h5') {
					const dom = document.getElementById(canvasId);
					if (dom) {
						resolve(dom);
					} else {
						reject(new Error(`H5未找到Canvas元素: ${canvasId}`));
					}
				}
				// 小程序平台：使用uni.createSelectorQuery
				else {
					uni.createSelectorQuery()
						.in(this)
						.select(`#${canvasId}`)
						.fields({ node: true, size: true })
						.exec((res) => {
							if (!res || !res[0]) {
								reject(new Error(`小程序未找到Canvas元素: ${canvasId}`));
								return;
							}
							const canvasNode = res[0].node;
							// 适配高清屏
							const dpr = uni.getSystemInfoSync().pixelRatio || 1;
							canvasNode.width = res[0].width * dpr;
							canvasNode.height = res[0].height * dpr;
							resolve(canvasNode);
						});
				}
			});
		},

		// 容积趋势图初始化
		async initVolumeTrendChart() {
			try {
				const canvasElement = await this.getCanvasElement('volumeTrendChart');
				const chart = echarts.init(canvasElement);
				this.charts.volumeTrendChart = chart;

				const option = {
					tooltip: { trigger: 'axis' },
					grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['7天前', '6天前', '5天前', '4天前', '3天前', '2天前', '昨天', '今天']
					},
					yAxis: { type: 'value' },
					series: [
						{
							name: '已用容积 (m³)',
							type: 'line',
							data: [17200, 17500, 17800, 17600, 17900, 18100, 18000, 18200],
							lineStyle: { color: '#165DFF' },
							areaStyle: { color: 'rgba(22, 93, 255, 0.1)' },
							smooth: true
						}
					]
				};
				chart.setOption(option);
			} catch (error) {
				console.error('容积趋势图初始化失败:', error);
			}
		},

		// 入库状态占比图初始化
		async initInboundStatusChart() {
			try {
				const canvasElement = await this.getCanvasElement('inboundStatusChart');
				const chart = echarts.init(canvasElement);
				this.charts.inboundStatusChart = chart;

				const option = {
					tooltip: { trigger: 'item' },
					legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
					series: [
						{
							type: 'pie',
							radius: ['50%', '30%'],
							data: [
								{ value: 22, name: '已验收', itemStyle: { color: '#00B42A' } },
								{ value: 4, name: '待审核', itemStyle: { color: '#FF7D00' } },
								{ value: 20, name: '已归档', itemStyle: { color: '#165DFF' } },
								{ value: 2, name: '其他', itemStyle: { color: '#86909C' } }
							]
						}
					]
				};
				chart.setOption(option);
			} catch (error) {
				console.error('入库状态占比图初始化失败:', error);
			}
		},

		// 入库类别占比图初始化
		async initInboundCategoryChart() {
			try {
				const canvasElement = await this.getCanvasElement('inboundCategoryChart');
				const chart = echarts.init(canvasElement);
				this.charts.inboundCategoryChart = chart;

				const option = {
					tooltip: { trigger: 'item' },
					legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
					series: [
						{
							type: 'pie',
							radius: '50%',
							data: [
								{ value: 35, name: '电子产品', itemStyle: { color: '#165DFF' } },
								{ value: 25, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
								{ value: 20, name: '家居用品', itemStyle: { color: '#FF7D00' } },
								{ value: 20, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
							]
						}
					]
				};
				chart.setOption(option);
			} catch (error) {
				console.error('入库类别占比图初始化失败:', error);
			}
		},

		// 出库状态占比图初始化
		async initOutboundStatusChart() {
			try {
				const canvasElement = await this.getCanvasElement('outboundStatusChart');
				const chart = echarts.init(canvasElement);
				this.charts.outboundStatusChart = chart;

				const option = {
					tooltip: { trigger: 'item' },
					legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
					series: [
						{
							type: 'pie',
							radius: ['50%', '30%'],
							data: [
								{ value: 30, name: '已分拣', itemStyle: { color: '#165DFF' } },
								{ value: 2, name: '待审核', itemStyle: { color: '#FF7D00' } },
								{ value: 28, name: '已出库', itemStyle: { color: '#00B42A' } },
								{ value: 4, name: '其他', itemStyle: { color: '#86909C' } }
							]
						}
					]
				};
				chart.setOption(option);
			} catch (error) {
				console.error('出库状态占比图初始化失败:', error);
			}
		},

		// 出库类别占比图初始化
		async initOutboundCategoryChart() {
			try {
				const canvasElement = await this.getCanvasElement('outboundCategoryChart');
				const chart = echarts.init(canvasElement);
				this.charts.outboundCategoryChart = chart;

				const option = {
					tooltip: { trigger: 'item' },
					legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
					series: [
						{
							type: 'pie',
							radius: '50%',
							data: [
								{ value: 30, name: '电子产品', itemStyle: { color: '#165DFF' } },
								{ value: 30, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
								{ value: 25, name: '家居用品', itemStyle: { color: '#FF7D00' } },
								{ value: 15, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
							]
						}
					]
				};
				chart.setOption(option);
			} catch (error) {
				console.error('出库类别占比图初始化失败:', error);
			}
		},

		// 添加卡片加载动画
		addCardAnimation() {
			const cards = document.querySelectorAll('.panel-card, .stat-card');
			cards.forEach((card, index) => {
				card.style.opacity = '0';
				card.style.transform = 'translateY(20px)';
				card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

				setTimeout(() => {
					card.style.opacity = '1';
					card.style.transform = 'translateY(0)';
				}, 100 + index * 100);
			});
		}
	},

	onReady() {
		// 初始化日期时间
		this.updateDateTime();
		setInterval(this.updateDateTime, 1000);

		// 添加卡片动画
		this.addCardAnimation();
	},

	onResize() {
		// 窗口尺寸变化时重绘图表
		Object.values(this.charts).forEach((chart) => {
			chart && chart.resize();
		});
	},

	onUnload() {
		// 页面卸载时销毁图表，释放资源
		Object.values(this.charts).forEach((chart) => {
			chart && chart.dispose();
		});
	}
};
</script>

<style scoped>
/* 基础样式 */
.container {
	padding: 16px;
	background-color: #f2f3f5;
	min-height: 100vh;
	box-sizing: border-box;
	margin-bottom: 160rpx;
}

/* 头部样式 */
.header {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 768px) {
	.header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.page-title {
	font-size: 24px;
	font-weight: bold;
	color: #1d2129;
	display: block;
}

.warehouse-base-info {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 8px;
}

.info-item {
	display: flex;
	align-items: center;
	color: #4e5969;
	font-size: 14px;
	gap: 20rpx;
}

.info-value {
	font-weight: 500;
	color: #1d2129;
}
.info_setup {
	color: #165dff;
	pointer-events: inherit;
}
.datetime-card {
	background-color: white;
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	color: #1d2129;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.current-date {
	display: block;
	font-weight: 500;
}

.current-time {
	display: block;
	font-size: 14px;
	color: #86909c;
}

.icon-mr {
	margin-right: 4px;
}

/* 网格布局 */
.grid {
	display: grid;
	gap: 16px;
	margin-bottom: 20px;
}

.grid-2 {
	grid-template-columns: 1fr;
}

.grid-3 {
	grid-template-columns: 1fr;
}

.grid-4 {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lg-col-span-2 {
	grid-column: span 1;
}

@media (min-width: 1024px) {
	.lg-col-span-2 {
		grid-column: span 2;
	}
}

/* 统计卡片样式 */
.stat-card {
	background-color: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-title {
	color: #86909c;
	font-size: 14px;
	font-weight: 500;
	display: block;
	margin-bottom: 8px;
}

.stat-value {
	color: #1d2129;
	font-size: 24px;
	font-weight: bold;
	display: block;
	margin-bottom: 4px;
}

.stat-trend {
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.trend-up {
	color: #00b42a;
}

/* 面板卡片样式 */
.panel-card {
	background-color: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.panel-title {
	font-size: 18px;
	font-weight: 600;
	color: #1d2129;
	display: block;
	margin-bottom: 16px;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.panel-actions {
	display: flex;
	gap: 8px;
}

.action-btn {
	padding: 4px 12px;
	font-size: 12px;
	border-radius: 999px;
	border: none;
	background-color: #f2f3f5;
	color: #86909c;
}

.action-btn.active {
	background-color: rgba(22, 93, 255, 0.1);
	color: #165dff;
}

/* 图表容器 */
.chart-container {
	height: 300px;
}

.chart-item {
	height: 240px;
	width: 280px;
}

.chart {
	width: 100%;
	height: 100%;
	display: block;
}

/* 存储区列表 */
.storage-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.storage-item {
	padding: 12px 16px;
	border-left: 4px solid transparent;
	position: relative;
}

.storage-normal {
	border-left-color: #165dff;
}

.storage-cold {
	border-left-color: #86909c;
}

.storage-danger {
	border-left-color: #f53f3f;
}

.storage-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.storage-name {
	font-weight: 500;
	color: #1d2129;
}

.storage-slots {
	font-size: 12px;
	color: #86909c;
}

.storage-info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	font-size: 14px;
	color: #4e5969;
}

.info-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.monitor-btn {
	color: #165dff;
	justify-content: flex-end;
	cursor: pointer;
}

/* 统计网格 */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

@media (min-width: 576px) {
	.stat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.stat-item {
	background-color: #f2f3f5;
	border-radius: 8px;
	padding: 12px;
	text-align: center;
}

.stat-item-title {
	font-size: 12px;
	color: #86909c;
	display: block;
	margin-bottom: 4px;
}

.stat-item-value {
	font-size: 24px;
	font-weight: bold;
	color: #1d2129;
}

.stat-item-value.success {
	color: #00b42a;
}

.stat-item-value.warning {
	color: #ff7d00;
}

.stat-item-value.primary {
	color: #165dff;
}

/* 差异面板 */
.diff-panel {
	background-color: rgba(245, 63, 63, 0.1);
	border: 1px solid rgba(245, 63, 63, 0.2);
	border-radius: 8px;
	padding: 6px;
}

.diff-title {
	font-size: 14px;
	font-weight: 500;
	color: #f53f3f;
	display: block;
	margin-bottom: 8px;
}

.diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.diff-item {
	text-align: center;
}

.diff-value {
	font-weight: bold;
	color: #f53f3f;
	display: block;
}

.diff-label {
	font-size: 12px;
	color: #4e5969;
}

/* 表格样式 */
.table-container {
	overflow-x: auto;
}

.logistics-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
}

.table-header {
	color: #86909c;
	font-size: 12px;
	text-align: left;
}

.table-header th {
	padding: 12px 0;
	font-weight: 500;
	border-bottom: 1px solid #e5e6eb;
}

.table-row {
	border-bottom: 1px solid #f2f3f5;
}

.table-row:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.table-row td {
	padding: 12px 0;
}

.progress-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

.progress-bar {
	height: 8px;
	background-color: #00b42a;
	border-radius: 4px;
	min-width: 96px;
}

.progress-text {
	font-weight: 500;
}

/* 财务列表 */
.finance-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.finance-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.finance-header {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

.finance-name {
	color: #4e5969;
}

.finance-value {
	font-weight: 500;
}

.finance-progress {
	height: 8px;
	background-color: #f2f3f5;
	border-radius: 4px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #165dff;
}

.finance-total {
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid #e5e6eb;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.total-label {
	font-weight: 500;
}

.total-value {
	font-size: 20px;
	font-weight: bold;
	color: #1d2129;
}

/* 颜色常量 */
.success {
	color: #00b42a;
}

.warning {
	color: #ff7d00;
}

.primary {
	color: #165dff;
}

.danger {
	color: #f53f3f;
}
</style>
